import React, { Component } from 'react'
import '../../common/common.css'

export default class ChangeOptimizeShouldComponentUpdate extends Component {

    state = { carName: "奔驰c36" }

    changeCar = () => {
        this.setState({carName:'迈巴赫'})
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log(this.props, this.state); //目前的props和state
        console.log(nextProps, nextState); //接下要变化的目标props，目标state
        return this.state.carName !== nextState.carName
    }

    render() {
        console.log('Parent---render');
        const { carName } = this.state
        return (
            <div className="parent">
                <button className='returnButton'><a href="/">点击返回主菜单</a></button>
                <h3>我是Parent组件</h3>
                <span>我的车名字是：{carName}</span><br />
                <button onClick={this.changeCar}>点我换车</button>
                <Child carName={carName} />
            </div>
        )
    }
}

class Child extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        console.log(this.props, this.state); //目前的props和state
        console.log(nextProps, nextState); //接下要变化的目标props，目标state
        return this.props.carName !== nextProps.carName
    }
    render() {
        console.log('Child---render');
        return (
            <div className="child">
                <h3>我是Child组件</h3>
                <span>我接到的车是：{this.props.carName}</span>
            </div>
        )
    }
}
